<template>
	<div>
		<div class="topImg">
			<!-- <div class="title">
				<div>公司简介</div>
				<img src="../assets/tline.svg" style="width: 60px;height: 4px;" />
			</div>
			<div class="tabs leftTan">
				<div class="iconbox">
					<img src="../assets/home.svg" />
				</div>
				<div>
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item>公司简介</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</div> -->
		</div>

		<div style="width: 100%;margin: 20px auto;">
			<div class="titleTab">
				<div class="jjfa">
					公司简介
					<!-- <img src="../assets/tline.svg" style="width: 60px;height: 4px;" /> -->
				</div>
			</div>
			<el-row class="elRow">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<div class="gsmz">
						XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					</div>

				</el-col>
			</el-row>
			<el-row class="elRow">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<div>
						<img src="../assets/bg.jpg" style="width: 100%;" />
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<div>
						<img src="../assets/bg.jpg" style="width: 100%;" />
					</div>
				</el-col>

			</el-row>
			<div class="brandBox">
				<div class="brandContent">
					<div>品牌理念</div>
					<div class="ppln">
						XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
					</div>
					<el-row class="brandRow">
						<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<div>
								<img src="../assets/bg.jpg" style="width: 100%;" />
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<div>
								<img src="../assets/bg.jpg" style="width: 100%;" />
							</div>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
							<div>
								<img src="../assets/bg.jpg" style="width: 100%;" />
							</div>
						</el-col>
					</el-row>
				</div>

			</div>
			<el-row class="operateContent">
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<div class="operateTxt">
						<div>经营理念</div>
						<div class="ppln">
							XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<div class="operateImg">
						<img src="../assets/bg.jpg" style="width: 100%;" />
					</div>
				</el-col>

			</el-row>
		</div>
	</div>

	</div>
</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		name: 'Home',
		components: {
			vueSeamlessScroll
		},
		data() {
			return {
				profile: {}
			}
		},
		filters: {

		},
		created() {
			this.getProfile()
		},
		mounted() {
			// this.getNewslist()
		},
		beforeDestroy() {},
		methods: {
			getProfile() {
				var id = this.$route.params.id;
				this.$axios.get("/toni/webIndex/topNewsList?pid=" + id)
					.then((res) => {
						this.profile = res.data.result[0];
						console.log('profile', res)
						this.profile.image = 'https://tonisoft.hy2w.com/toniboot/sys/common/static/' + this.profile
							.image

					})
			},

		},
		computed: {},
		watch: {
			// 如果路由有变化，会再次执行该方法
			'$route': 'initEmps'
		},
	}
</script>

<style>
	@media screen and (max-width:539px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 40vh;
			color: #fff;
			position: relative;
		}

		.topImg .title {
			font-size: 36px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}

		@keyframes slideInFromLeft {
			0% {
				background-color: transparent;
				/* 动画开始时背景色透明 */
			}

			100% {
				background-color: rgba(255, 255, 255, 0.1);
				/* 动画结束时的背景色 */
			}
		}

		/* 应用动画到元素 */
		/* .slide-in-animation {
			  animation: slideInFromLeft 2s ease-in-out forwards;
			} */
		.tabs {
			width: 100%;
			height: 20%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.1);
			/* animation: slideInFromLeft 4s ease-in-out forwards; */
		}

		.leftTan {
			visibility: visible;
			animation-name: fadeInLeft;
			/*fadeInLeft为要使用的动画效果名，在这里不需要加animate前缀*/
			animation-duration: 3s;
		}

		.iconbox {
			width: 70px;
			height: 100%;
			background: #FDD000;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin: 0 2% 0 6%;
		}

		.tabs img {
			width: 26px;
			height: 100%;

		}

		.el-breadcrumb__inner a,
		.el-breadcrumb__inner.is-link {
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			transition: color .2s cubic-bezier(.645, .045, .355, 1);
			color: #848692;
		}

		.el-breadcrumb__separator {
			margin: 0 9px;
			font-weight: 700;
			color: #848692;
		}

		.el-breadcrumb__inner {
			color: #fff;
			font-size: 16px;
			font-weight: 700;
		}

		.el-breadcrumb__item:last-child .el-breadcrumb__inner,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
			font-weight: 700;
			color: #fff;
			font-size: 16px;
			cursor: text;
		}

		.titleTab {
			display: flex;
			align-items: center;
			margin-bottom: 4vh;
			width: 100%;
			text-align: center;
		}

		.jjfa {
			width: 100%;
			font-size: 28px;
			font-weight: bold;
			line-height: 16px;
		}

		.elRow {
			width: 84%;
			margin: 20px auto;
		}

		.elRow .el-col:nth-child(n) div{
			margin-bottom: 10px;
		}

		.elRow .el-col:last-child() div{
			margin-bottom: 0px;
		}

		.brandRow .el-col:nth-child(n) div{
			margin-bottom: 10px;
		}

		.brandRow .el-col:last-child() div{
			margin-bottom: 0px;
		}

		.brandBox {
			width: 100%;
			/* height: 40vh; */
			padding: 10vh 0;
			background-color: #f3f3f3;
			margin-top: 4vh;
		}

		.brandContent {
			width: 84%;
			margin: 0 auto;
		}

		.brandRow {
			width: 100%;
		}

		.topTxt {
			/* display: flex; */
			width: 100%;
			color: #555;
			line-height: 32px;
		}

		.gsmz {
			width: 100%;
			word-wrap: break-word;
			font-weight: bold;
			text-align: center;
		}

		.ppln {
			width: 100%;
			word-wrap: break-word;
			margin: 10px 0;
			
		}
		.operateContent {
			margin-top: 4vh;
			width: 84%;
			margin: 20px auto;
		}
		.operateTxt{
			margin-bottom: 20px;
		}

	}

	@media screen and (min-width:970px) {
		.topImg {
			background-image: url(../assets/lm-ban2.jpg);
			background-position: 10%;
			width: 100%;
			height: 40vh;
			color: #fff;
			position: relative;
		}

		.topImg .title {
			font-size: 36px;
			font-weight: bold;
			line-height: 20px;
			position: absolute;
			top: 40%;
			left: 6%;
		}

		@keyframes slideInFromLeft {
			0% {
				background-color: transparent;
				/* 动画开始时背景色透明 */
			}

			100% {
				background-color: rgba(255, 255, 255, 0.1);
				/* 动画结束时的背景色 */
			}
		}

		/* 应用动画到元素 */
		/* .slide-in-animation {
		  animation: slideInFromLeft 2s ease-in-out forwards;
		} */
		.tabs {
			width: 100%;
			height: 20%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.1);
			/* animation: slideInFromLeft 4s ease-in-out forwards; */
		}

		.leftTan {
			visibility: visible;
			animation-name: fadeInLeft;
			/*fadeInLeft为要使用的动画效果名，在这里不需要加animate前缀*/
			animation-duration: 3s;
		}

		.iconbox {
			width: 70px;
			height: 100%;
			background: #FDD000;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			margin: 0 2% 0 6%;
		}

		.tabs img {
			width: 26px;
			height: 100%;

		}

		.el-breadcrumb__inner a,
		.el-breadcrumb__inner.is-link {
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			transition: color .2s cubic-bezier(.645, .045, .355, 1);
			color: #848692;
		}

		.el-breadcrumb__separator {
			margin: 0 9px;
			font-weight: 700;
			color: #848692;
		}

		.el-breadcrumb__inner {
			color: #fff;
			font-size: 16px;
			font-weight: 700;
		}

		.el-breadcrumb__item:last-child .el-breadcrumb__inner,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
		.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
			font-weight: 700;
			color: #fff;
			font-size: 16px;
			cursor: text;
		}

		.titleTab {
			display: flex;
			align-items: center;
			margin-bottom: 4vh;
			width: 100%;
			text-align: center;
		}

		.jjfa {
			width: 100%;
			font-size: 28px;
			font-weight: bold;
			line-height: 16px;
		}

		.elRow {
			width: 84%;
			margin: 20px auto;
		}

		.elRow .el-col:nth-child(n) div{
			margin-right: 10px;
		}

		.elRow .el-col:last-child div{
			margin-right: 0px;
		}

		.brandRow .el-col:nth-child(n) div{
			margin-right: 10px;
		}

		.brandRow .el-col:last-child div{
			margin-right: 0px;
		}

		.brandBox {
			width: 100%;
			height: 40vh;
			padding: 10vh 0;
			background-color: #f3f3f3;
			margin-top: 4vh;
		}

		.brandContent {
			width: 84%;
			margin: 0 auto;
		}

		.brandRow {
			width: 100%;
		}

		.topTxt {
			/* display: flex; */
			width: 100%;
			color: #555;
			line-height: 32px;
		}

		.gsmz {
			width: 100%;
			word-wrap: break-word;
			font-weight: bold;
			text-align: center;
		}

		.ppln {
			width: 100%;
			word-wrap: break-word;
			margin: 20px 0;
		}

		.operateContent {
			margin-top: 4vh;
			width: 84%;
			margin: 20px auto;
		}
		.operateTxt{
			margin-right: 20px;
		}

	}
</style>